<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务列表 - SocialService</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #3b82f6;
            --primary-light: #eff6ff;
            --secondary: #10b981;
            --secondary-light: #dcfce7;
            --accent: #8b5cf6;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #64748b;
            --light-gray: #e2e8f0;
            --danger: #ef4444;
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f1f5f9;
            color: var(--dark);
        }
        
        .navbar {
            background-color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .filter-section {
            background-color: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            margin-bottom: 1.5rem;
        }
        
        .filter-title {
            font-weight: 600;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .filter-group {
            margin-bottom: 1.5rem;
        }
        
        .filter-label {
            font-weight: 500;
            margin-bottom: 0.75rem;
            display: block;
        }
        
        .checkbox-group, .radio-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        
        .form-check {
            margin-bottom: 0.25rem;
        }
        
        .form-check-input:checked {
            background-color: var(--primary);
            border-color: var(--primary);
        }
        
        .price-slider {
            margin: 1rem 0;
        }
        
        .price-display {
            display: flex;
            justify-content: space-between;
            color: var(--gray);
            font-size: 0.9rem;
        }
        
        .service-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            transition: transform 0.2s, box-shadow 0.2s;
            margin-bottom: 1.5rem;
        }
        
        .service-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        }
        
        .service-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .service-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .service-author {
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .service-time {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        .service-content {
            padding: 1rem;
        }
        
        .service-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            font-size: 1.1rem;
            color: var(--dark);
        }
        
        .service-description {
            color: var(--gray);
            margin-bottom: 1rem;
            line-height: 1.6;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .image-container {
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 1rem;
        }
        
        .service-image {
            width: 100%;
            height: 160px;
            object-fit: cover;
        }
        
        .service-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 1rem;
            border-top: 1px solid var(--light-gray);
            font-size: 0.9rem;
        }
        
        .meta-stats {
            display: flex;
            gap: 1.5rem;
            color: var(--gray);
        }
        
        .meta-stat {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .service-actions {
            display: flex;
            gap: 1rem;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: var(--gray);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.25rem;
            transition: color 0.2s;
        }
        
        .action-btn:hover {
            color: var(--primary);
        }
        
        .action-btn.liked {
            color: var(--danger);
        }
        
        .action-btn.saved {
            color: var(--accent);
        }
        
        .section-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: var(--dark);
        }
        
        .sort-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
            gap: 1rem;
        }
        
        .sort-options {
            display: flex;
            gap: 1rem;
        }
        
        .sort-btn {
            background-color: white;
            border: 1px solid var(--light-gray);
            border-radius: 6px;
            padding: 0.5rem 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .sort-btn:hover, .sort-btn.active {
            background-color: var(--primary-light);
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .view-options {
            display: flex;
            gap: 0.5rem;
        }
        
        .view-btn {
            background-color: white;
            border: 1px solid var(--light-gray);
            border-radius: 6px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .view-btn:hover, .view-btn.active {
            background-color: var(--primary-light);
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .apply-filters {
            width: 100%;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            padding: 0.75rem;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .apply-filters:hover {
            background-color: #2563eb;
        }
        
        .clear-filters {
            width: 100%;
            background-color: transparent;
            color: var(--gray);
            border: 1px solid var(--light-gray);
            border-radius: 6px;
            padding: 0.75rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            margin-top: 0.5rem;
        }
        
        .clear-filters:hover {
            color: var(--dark);
            border-color: var(--gray);
        }
        
        .filter-badge {
            display: inline-flex;
            align-items: center;
            background-color: var(--primary-light);
            color: var(--primary);
            border-radius: 20px;
            padding: 0.25rem 0.75rem;
            font-size: 0.8rem;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
        }
        
        .filter-badge .remove-filter {
            margin-left: 0.5rem;
            cursor: pointer;
            font-weight: bold;
        }
        
        .active-filters {
            margin-bottom: 1rem;
            flex-wrap: wrap;
        }
        
        .mobile-filter-toggle {
            display: none;
            background-color: white;
            border: 1px solid var(--light-gray);
            border-radius: 6px;
            padding: 0.5rem 1rem;
            margin-bottom: 1.5rem;
            width: 100%;
            text-align: center;
            cursor: pointer;
        }
        
        /* 列表视图样式 */
        .list-view .service-card {
            display: flex;
        }
        
        .list-view .image-container {
            flex: 0 0 200px;
            margin-bottom: 0;
            margin-right: 1rem;
        }
        
        .list-view .service-image {
            height: 100%;
        }
        
        .list-view .service-details {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .list-view .service-meta {
            margin-top: auto;
        }
        
        /* 网格视图样式 */
        .grid-view .services-container {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 1.5rem;
        }
        
        @media (min-width: 768px) {
            .grid-view .services-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (min-width: 992px) {
            .grid-view .services-container {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .filter-sidebar {
                margin-bottom: 1.5rem;
            }
            
            .list-view .service-card {
                flex-direction: column;
            }
            
            .list-view .image-container {
                flex: none;
                width: 100%;
                margin-right: 0;
                margin-bottom: 1rem;
            }
        }
        
        @media (max-width: 768px) {
            .mobile-filter-toggle {
                display: block;
            }
            
            .filter-sidebar {
                display: none;
            }
            
            .filter-sidebar.show {
                display: block;
            }
            
            .sort-bar {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .sort-options {
                flex-wrap: wrap;
            }
        }
    </style>
</head>
<body class="grid-view">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg py-3 px-4">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-handshake-angle"></i>
                SocialService
            </a>
            
            <div class="search-container mx-3 flex-grow-1 max-w-md">
                <div class="input-group">
                    <span class="input-group-text bg-transparent border-right-0">
                        <i class="fas fa-search text-gray-400"></i>
                    </span>
                    <input type="text" class="form-control border-left-0" placeholder="搜索服务、技能或提供者...">
                </div>
            </div>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto align-items-center">
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="fas fa-home me-1"></i>首页
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">
                            <i class="fas fa-th-large me-1"></i>服务列表
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="fas fa-plus-circle me-1"></i>发布服务
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="fas fa-bell me-1"></i>通知
                        </a>
                    </li>
                    <li class="nav-item ms-2">
                        <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="rounded-circle" style="width: 38px; height: 38px; object-fit: cover;">
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container py-5">
        <h1 class="section-title">服务列表</h1>
        
        <!-- 移动端筛选按钮 -->
        <div class="mobile-filter-toggle" id="mobileFilterToggle">
            <i class="fas fa-filter me-1"></i> 筛选条件
        </div>
        
        <!-- 活动筛选标签 -->
        <div class="d-flex active-filters" id="activeFilters">
            <!-- 筛选标签将通过JS动态添加 -->
        </div>
        
        <div class="row">
            <!-- 筛选侧边栏 -->
            <div class="col-lg-3 filter-sidebar" id="filterSidebar">
                <div class="filter-section">
                    <h3 class="filter-title">服务分类</h3>
                    <div class="filter-group">
                        <div class="checkbox-group">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="design" id="categoryDesign">
                                <label class="form-check-label" for="categoryDesign">
                                    设计创意
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="education" id="categoryEducation">
                                <label class="form-check-label" for="categoryEducation">
                                    教育培训
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="life" id="categoryLife">
                                <label class="form-check-label" for="categoryLife">
                                    生活服务
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="tech" id="categoryTech">
                                <label class="form-check-label" for="categoryTech">
                                    技术开发
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="marketing" id="categoryMarketing">
                                <label class="form-check-label" for="categoryMarketing">
                                    营销推广
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="media" id="categoryMedia">
                                <label class="form-check-label" for="categoryMedia">
                                    影音制作
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="filter-section">
                    <h3 class="filter-title">价格范围</h3>
                    <div class="filter-group">
                        <input type="range" min="0" max="5000" value="2000" class="form-range price-slider" id="priceRange">
                        <div class="price-display">
                            <span>¥0</span>
                            <span id="priceRangeValue">¥2000</span>
                            <span>¥5000+</span>
                        </div>
                    </div>
                </div>
                
                <div class="filter-section">
                    <h3 class="filter-title">评分</h3>
                    <div class="filter-group">
                        <div class="radio-group">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="rating" id="ratingAny" checked>
                                <label class="form-check-label" for="ratingAny">
                                    任何评分
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="rating" id="rating4plus">
                                <label class="form-check-label" for="rating4plus">
                                    <i class="fas fa-star text-warning"></i>
                                    <i class="fas fa-star text-warning"></i>
                                    <i class="fas fa-star text-warning"></i>
                                    <i class="fas fa-star text-warning"></i>
                                    <i class="far fa-star text-warning"></i> 及以上
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="rating" id="rating3plus">
                                <label class="form-check-label" for="rating3plus">
                                    <i class="fas fa-star text-warning"></i>
                                    <i class="fas fa-star text-warning"></i>
                                    <i class="fas fa-star text-warning"></i>
                                    <i class="far fa-star text-warning"></i>
                                    <i class="far fa-star text-warning"></i> 及以上
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="filter-section">
                    <h3 class="filter-title">发布时间</h3>
                    <div class="filter-group">
                        <div class="radio-group">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="time" id="timeAny" checked>
                                <label class="form-check-label" for="timeAny">
                                    任何时间
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="time" id="timeToday">
                                <label class="form-check-label" for="timeToday">
                                    今天
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="time" id="timeWeek">
                                <label class="form-check-label" for="timeWeek">
                                    本周内
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="time" id="timeMonth">
                                <label class="form-check-label" for="timeMonth">
                                    本月内
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="filter-section">
                    <h3 class="filter-title">其他筛选</h3>
                    <div class="filter-group">
                        <div class="checkbox-group">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="hasImage" id="filterHasImage">
                                <label class="form-check-label" for="filterHasImage">
                                    有图片的服务
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="featured" id="filterFeatured">
                                <label class="form-check-label" for="filterFeatured">
                                    精选服务
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="verified" id="filterVerified">
                                <label class="form-check-label" for="filterVerified">
                                    已认证提供者
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <button class="apply-filters" id="applyFilters">应用筛选</button>
                    <button class="clear-filters" id="clearFilters">清除全部筛选</button>
                </div>
            </div>
            
            <!-- 服务列表 -->
            <div class="col-lg-9">
                <!-- 排序和视图选项 -->
                <div class="sort-bar">
                    <div class="sort-options">
                        <div class="sort-btn active" data-sort="recommended">
                            <i class="fas fa-star"></i> 推荐
                        </div>
                        <div class="sort-btn" data-sort="newest">
                            <i class="fas fa-clock"></i> 最新发布
                        </div>
                        <div class="sort-btn" data-sort="popular">
                            <i class="fas fa-fire"></i> 最受欢迎
                        </div>
                        <div class="sort-btn" data-sort="price-low">
                            <i class="fas fa-sort-amount-down"></i> 价格从低到高
                        </div>
                        <div class="sort-btn" data-sort="price-high">
                            <i class="fas fa-sort-amount-up"></i> 价格从高到低
                        </div>
                    </div>
                    
                    <div class="view-options">
                        <div class="view-btn active" data-view="grid">
                            <i class="fas fa-th"></i>
                        </div>
                        <div class="view-btn" data-view="list">
                            <i class="fas fa-list"></i>
                        </div>
                    </div>
                </div>
                
                <!-- 服务内容 -->
                <div class="services-container" id="servicesContainer">
                    <!-- 服务1 -->
                    <div class="service-card" data-category="design" data-price="899" data-rating="4.9" data-time="week">
                        <div class="service-header">
                            <img src="https://picsum.photos/100/100?random=10" alt="服务提供者头像" class="service-avatar">
                            <div>
                                <div class="service-author">创意设计工作室 <span class="badge bg-primary text-white" style="font-size: 0.7rem;">已认证</span></div>
                                <div class="service-time">3天前发布</div>
                            </div>
                        </div>
                        
                        <div class="service-content">
                            <div class="image-container">
                                <img src="https://picsum.photos/800/600?random=20" alt="品牌设计作品展示" class="service-image">
                            </div>
                            
                            <h3 class="service-title">品牌标识设计套餐 - 含Logo、名片与品牌手册</h3>
                            <p class="service-description">专业品牌设计服务，为您的企业打造独特视觉形象。包含Logo设计、标准色制定、名片设计及完整品牌手册。</p>
                            
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <div class="d-flex align-items-center">
                                    <div class="text-warning me-1">
                                        <i class="fas fa-star"></i>
                                    </div>
                                    <span>4.9 (128条评价)</span>
                                </div>
                                <div class="font-weight-bold text-primary">¥899</div>
                            </div>
                        </div>
                        
                        <div class="service-meta">
                            <div class="meta-stats">
                                <div class="meta-stat">
                                    <i class="fas fa-eye"></i>
                                    <span>2.5k</span>
                                </div>
                                <div class="meta-stat">
                                    <i class="fas fa-comment"></i>
                                    <span>128</span>
                                </div>
                            </div>
                            
                            <div class="service-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>342</span>
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 服务2 -->
                    <div class="service-card" data-category="education" data-price="199" data-rating="4.7" data-time="today">
                        <div class="service-header">
                            <img src="https://picsum.photos/100/100?random=11" alt="服务提供者头像" class="service-avatar">
                            <div>
                                <div class="service-author">英语学习导师</div>
                                <div class="service-time">5小时前发布</div>
                            </div>
                        </div>
                        
                        <div class="service-content">
                            <div class="image-container">
                                <img src="https://picsum.photos/800/600?random=22" alt="英语教学场景" class="service-image">
                            </div>
                            
                            <h3 class="service-title">一对一英语口语在线辅导</h3>
                            <p class="service-description">资深外教一对一英语口语辅导，专注日常交流与商务场景应用，定制化学习计划，快速提升口语能力。</p>
                            
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <div class="d-flex align-items-center">
                                    <div class="text-warning me-1">
                                        <i class="fas fa-star"></i>
                                    </div>
                                    <span>4.7 (96条评价)</span>
                                </div>
                                <div class="font-weight-bold text-primary">¥199/课时</div>
                            </div>
                        </div>
                        
                        <div class="service-meta">
                            <div class="meta-stats">
                                <div class="meta-stat">
                                    <i class="fas fa-eye"></i>
                                    <span>1.8k</span>
                                </div>
                                <div class="meta-stat">
                                    <i class="fas fa-comment"></i>
                                    <span>96</span>
                                </div>
                            </div>
                            
                            <div class="service-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>215</span>
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 服务3 -->
                    <div class="service-card" data-category="life" data-price="350" data-rating="4.8" data-time="month">
                        <div class="service-header">
                            <img src="https://picsum.photos/100/100?random=13" alt="服务提供者头像" class="service-avatar">
                            <div>
                                <div class="service-author">家庭烘焙师 <span class="badge bg-primary text-white" style="font-size: 0.7rem;">已认证</span></div>
                                <div class="service-time">2周前发布</div>
                            </div>
                        </div>
                        
                        <div class="service-content">
                            <div class="image-container">
                                <img src="https://picsum.photos/800/600?random=25" alt="定制蛋糕展示" class="service-image">
                            </div>
                            
                            <h3 class="service-title">定制生日蛋糕与甜点</h3>
                            <p class="service-description">纯手工制作生日蛋糕与各式甜点，使用优质原料，无添加剂，可定制造型与口味，支持同城配送。</p>
                            
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <div class="d-flex align-items-center">
                                    <div class="text-warning me-1">
                                        <i class="fas fa-star"></i>
                                    </div>
                                    <span>4.8 (103条评价)</span>
                                </div>
                                <div class="font-weight-bold text-primary">¥350起</div>
                            </div>
                        </div>
                        
                        <div class="service-meta">
                            <div class="meta-stats">
                                <div class="meta-stat">
                                    <i class="fas fa-eye"></i>
                                    <span>2.1k</span>
                                </div>
                                <div class="meta-stat">
                                    <i class="fas fa-comment"></i>
                                    <span>103</span>
                                </div>
                            </div>
                            
                            <div class="service-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>278</span>
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 服务4 -->
                    <div class="service-card" data-category="tech" data-price="2500" data-rating="4.6" data-time="week">
                        <div class="service-header">
                            <img src="https://picsum.photos/100/100?random=17" alt="服务提供者头像" class="service-avatar">
                            <div>
                                <div class="service-author">Web开发工作室 <span class="badge bg-primary text-white" style="font-size: 0.7rem;">已认证</span></div>
                                <div class="service-time">5天前发布</div>
                            </div>
                        </div>
                        
                        <div class="service-content">
                            <div class="image-container">
                                <img src="https://picsum.photos/800/600?random=32" alt="网站开发服务" class="service-image">
                            </div>
                            
                            <h3 class="service-title">响应式网站开发 - 企业官网</h3>
                            <p class="service-description">专业团队提供响应式网站开发服务，包括企业官网、电商平台、博客等各类网站建设，一站式服务。</p>
                            
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <div class="d-flex align-items-center">
                                    <div class="text-warning me-1">
                                        <i class="fas fa-star"></i>
                                    </div>
                                    <span>4.6 (58条评价)</span>
                                </div>
                                <div class="font-weight-bold text-primary">¥2500起</div>
                            </div>
                        </div>
                        
                        <div class="service-meta">
                            <div class="meta-stats">
                                <div class="meta-stat">
                                    <i class="fas fa-eye"></i>
                                    <span>1.2k</span>
                                </div>
                                <div class="meta-stat">
                                    <i class="fas fa-comment"></i>
                                    <span>58</span>
                                </div>
                            </div>
                            
                            <div class="service-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>189</span>
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 服务5 -->
                    <div class="service-card" data-category="media" data-price="500" data-rating="4.5" data-time="today">
                        <div class="service-header">
                            <img src="https://picsum.photos/100/100?random=36" alt="服务提供者头像" class="service-avatar">
                            <div>
                                <div class="service-author">视频剪辑师</div>
                                <div class="service-time">3小时前发布</div>
                            </div>
                        </div>
                        
                        <div class="service-content">
                            <div class="image-container">
                                <img src="https://picsum.photos/800/600?random=37" alt="视频剪辑作品" class="service-image">
                            </div>
                            
                            <h3 class="service-title">短视频剪辑与制作</h3>
                            <p class="service-description">专业剪辑师提供短视频制作服务，包括素材剪辑、字幕添加、特效制作、配乐等，打造吸睛内容。</p>
                            
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <div class="d-flex align-items-center">
                                    <div class="text-warning me-1">
                                        <i class="fas fa-star"></i>
                                    </div>
                                    <span>4.5 (76条评价)</span>
                                </div>
                                <div class="font-weight-bold text-primary">¥500/条</div>
                            </div>
                        </div>
                        
                        <div class="service-meta">
                            <div class="meta-stats">
                                <div class="meta-stat">
                                    <i class="fas fa-eye"></i>
                                    <span>1.7k</span>
                                </div>
                                <div class="meta-stat">
                                    <i class="fas fa-comment"></i>
                                    <span>76</span>
                                </div>
                            </div>
                            
                            <div class="service-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>215</span>
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 服务6 -->
                    <div class="service-card" data-category="marketing" data-price="1200" data-rating="4.7" data-time="month">
                        <div class="service-header">
                            <img src="https://picsum.photos/100/100?random=41" alt="服务提供者头像" class="service-avatar">
                            <div>
                                <div class="service-author">营销顾问 <span class="badge bg-primary text-white" style="font-size: 0.7rem;">已认证</span></div>
                                <div class="service-time">3周前发布</div>
                            </div>
                        </div>
                        
                        <div class="service-content">
                            <div class="image-container">
                                <img src="https://picsum.photos/800/600?random=43" alt="营销服务" class="service-image">
                            </div>
                            
                            <h3 class="service-title">社交媒体营销方案</h3>
                            <p class="service-description">专业团队提供社交媒体营销策划与执行，包括内容创作、账号运营、活动策划，提升品牌影响力。</p>
                            
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <div class="d-flex align-items-center">
                                    <div class="text-warning me-1">
                                        <i class="fas fa-star"></i>
                                    </div>
                                    <span>4.7 (42条评价)</span>
                                </div>
                                <div class="font-weight-bold text-primary">¥1200/月</div>
                            </div>
                        </div>
                        
                        <div class="service-meta">
                            <div class="meta-stats">
                                <div class="meta-stat">
                                    <i class="fas fa-eye"></i>
                                    <span>956</span>
                                </div>
                                <div class="meta-stat">
                                    <i class="fas fa-comment"></i>
                                    <span>42</span>
                                </div>
                            </div>
                            
                            <div class="service-actions">
                                <button class="action-btn like-btn">
                                    <i class="far fa-heart"></i>
                                    <span>156</span>
                                </button>
                                <button class="action-btn save-btn">
                                    <i class="far fa-bookmark"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 分页 -->
                <nav class="mt-5">
                    <ul class="pagination justify-content-center">
                        <li class="page-item disabled">
                            <a class="page-link" href="#" tabindex="-1">上一页</a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 价格滑块交互
            const priceRange = document.getElementById('priceRange');
            const priceRangeValue = document.getElementById('priceRangeValue');
            
            priceRange.addEventListener('input', function() {
                priceRangeValue.textContent = `¥${this.value}`;
            });
            
            // 视图切换（网格/列表）
            const viewBtns = document.querySelectorAll('.view-btn');
            const body = document.body;
            
            viewBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    viewBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    
                    const viewType = this.getAttribute('data-view');
                    
                    if (viewType === 'grid') {
                        body.classList.remove('list-view');
                        body.classList.add('grid-view');
                    } else {
                        body.classList.remove('grid-view');
                        body.classList.add('list-view');
                    }
                });
            });
            
            // 排序选项
            const sortBtns = document.querySelectorAll('.sort-btn');
            
            sortBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    sortBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    
                    const sortType = this.getAttribute('data-sort');
                    sortServices(sortType);
                });
            });
            
            // 服务排序函数
            function sortServices(sortType) {
                const container = document.getElementById('servicesContainer');
                const cards = Array.from(container.getElementsByClassName('service-card'));
                
                switch(sortType) {
                    case 'newest':
                        cards.sort((a, b) => {
                            const timeA = a.getAttribute('data-time');
                            const timeB = b.getAttribute('data-time');
                            
                            const timeOrder = { 'today': 3, 'week': 2, 'month': 1 };
                            return timeOrder[timeB] - timeOrder[timeA];
                        });
                        break;
                        
                    case 'popular':
                        cards.sort((a, b) => {
                            const viewsA = parseInt(a.querySelector('.meta-stat .fas.fa-eye + span').textContent.replace('k', '000'));
                            const viewsB = parseInt(b.querySelector('.meta-stat .fas.fa-eye + span').textContent.replace('k', '000'));
                            return viewsB - viewsA;
                        });
                        break;
                        
                    case 'price-low':
                        cards.sort((a, b) => {
                            const priceA = parseInt(a.getAttribute('data-price'));
                            const priceB = parseInt(b.getAttribute('data-price'));
                            return priceA - priceB;
                        });
                        break;
                        
                    case 'price-high':
                        cards.sort((a, b) => {
                            const priceA = parseInt(a.getAttribute('data-price'));
                            const priceB = parseInt(b.getAttribute('data-price'));
                            return priceB - priceA;
                        });
                        break;
                        
                    case 'recommended':
                    default:
                        cards.sort((a, b) => {
                            const ratingA = parseFloat(a.getAttribute('data-rating'));
                            const ratingB = parseFloat(b.getAttribute('data-rating'));
                            return ratingB - ratingA;
                        });
                        break;
                }
                
                // 重新添加排序后的卡片
                cards.forEach(card => container.appendChild(card));
            }
            
            // 移动端筛选面板切换
            const mobileFilterToggle = document.getElementById('mobileFilterToggle');
            const filterSidebar = document.getElementById('filterSidebar');
            
            mobileFilterToggle.addEventListener('click', function() {
                filterSidebar.classList.toggle('show');
            });
            
            // 筛选功能
            const applyFiltersBtn = document.getElementById('applyFilters');
            const clearFiltersBtn = document.getElementById('clearFilters');
            const activeFiltersContainer = document.getElementById('activeFilters');
            
            applyFiltersBtn.addEventListener('click', applyFilters);
            clearFiltersBtn.addEventListener('click', clearFilters);
            
            // 应用筛选
            function applyFilters() {
                // 获取所有筛选条件
                const categories = Array.from(document.querySelectorAll('.checkbox-group input[type="checkbox"]:checked'))
                    .map(checkbox => checkbox.value);
                
                const maxPrice = parseInt(priceRange.value);
                
                let ratingFilter = '';
                if (document.getElementById('rating4plus').checked) {
                    ratingFilter = '4plus';
                } else if (document.getElementById('rating3plus').checked) {
                    ratingFilter = '3plus';
                }
                
                let timeFilter = '';
                if (document.getElementById('timeToday').checked) {
                    timeFilter = 'today';
                } else if (document.getElementById('timeWeek').checked) {
                    timeFilter = 'week';
                } else if (document.getElementById('timeMonth').checked) {
                    timeFilter = 'month';
                }
                
                const hasImage = document.getElementById('filterHasImage').checked;
                const isFeatured = document.getElementById('filterFeatured').checked;
                const isVerified = document.getElementById('filterVerified').checked;
                
                // 更新活跃筛选标签
                updateActiveFilters(categories, maxPrice, ratingFilter, timeFilter, hasImage, isFeatured, isVerified);
                
                // 筛选服务卡片
                const serviceCards = document.querySelectorAll('.service-card');
                serviceCards.forEach(card => {
                    let show = true;
                    
                    // 分类筛选
                    if (categories.length > 0 && !categories.includes(card.getAttribute('data-category'))) {
                        show = false;
                    }
                    
                    // 价格筛选
                    if (show && parseInt(card.getAttribute('data-price')) > maxPrice) {
                        show = false;
                    }
                    
                    // 评分筛选
                    if (show && ratingFilter === '4plus' && parseFloat(card.getAttribute('data-rating')) < 4) {
                        show = false;
                    }
                    if (show && ratingFilter === '3plus' && parseFloat(card.getAttribute('data-rating')) < 3) {
                        show = false;
                    }
                    
                    // 时间筛选
                    if (show && timeFilter && card.getAttribute('data-time') !== timeFilter) {
                        show = false;
                    }
                    
                    // 有图片筛选
                    if (show && hasImage && !card.querySelector('.service-image')) {
                        show = false;
                    }
                    
                    // 已认证筛选
                    if (show && isVerified && !card.querySelector('.service-author .badge.bg-primary')) {
                        show = false;
                    }
                    
                    // 显示或隐藏卡片
                    card.style.display = show ? 'block' : 'none';
                });
                
                // 在移动视图下，应用筛选后隐藏筛选面板
                if (window.innerWidth <= 768) {
                    filterSidebar.classList.remove('show');
                }
            }
            
            // 清除所有筛选
            function clearFilters() {
                // 重置所有筛选控件
                document.querySelectorAll('.form-check-input').forEach(input => {
                    if (input.type === 'checkbox') {
                        input.checked = false;
                    } else if (input.type === 'radio') {
                        input.checked = input.id === 'ratingAny' || input.id === 'timeAny';
                    }
                });
                
                // 重置价格滑块
                priceRange.value = 2000;
                priceRangeValue.textContent = '¥2000';
                
                // 清除活跃筛选标签
                activeFiltersContainer.innerHTML = '';
                
                // 显示所有服务卡片
                document.querySelectorAll('.service-card').forEach(card => {
                    card.style.display = 'block';
                });
            }
            
            // 更新活跃筛选标签
            function updateActiveFilters(categories, maxPrice, ratingFilter, timeFilter, hasImage, isFeatured, isVerified) {
                activeFiltersContainer.innerHTML = '';
                
                // 分类标签
                const categoryLabels = {
                    'design': '设计创意',
                    'education': '教育培训',
                    'life': '生活服务',
                    'tech': '技术开发',
                    'marketing': '营销推广',
                    'media': '影音制作'
                };
                
                categories.forEach(category => {
                    addFilterBadge(categoryLabels[category], () => {
                        document.getElementById(`category${category.charAt(0).toUpperCase() + category.slice(1)}`).checked = false;
                        applyFilters();
                    });
                });
                
                // 价格标签
                if (maxPrice < 5000) {
                    addFilterBadge(`价格 ≤ ¥${maxPrice}`, () => {
                        priceRange.value = 5000;
                        priceRangeValue.textContent = '¥5000';
                        applyFilters();
                    });
                }
                
                // 评分标签
                if (ratingFilter === '4plus') {
                    addFilterBadge('评分 ≥ 4星', () => {
                        document.getElementById('ratingAny').checked = true;
                        applyFilters();
                    });
                } else if (ratingFilter === '3plus') {
                    addFilterBadge('评分 ≥ 3星', () => {
                        document.getElementById('ratingAny').checked = true;
                        applyFilters();
                    });
                }
                
                // 时间标签
                const timeLabels = {
                    'today': '今天发布',
                    'week': '本周发布',
                    'month': '本月发布'
                };
                
                if (timeFilter) {
                    addFilterBadge(timeLabels[timeFilter], () => {
                        document.getElementById('timeAny').checked = true;
                        applyFilters();
                    });
                }
                
                // 其他筛选标签
                if (hasImage) {
                    addFilterBadge('有图片', () => {
                        document.getElementById('filterHasImage').checked = false;
                        applyFilters();
                    });
                }
                
                if (isVerified) {
                    addFilterBadge('已认证', () => {
                        document.getElementById('filterVerified').checked = false;
                        applyFilters();
                    });
                }
            }
            
            // 添加筛选标签
            function addFilterBadge(text, onRemove) {
                const badge = document.createElement('div');
                badge.className = 'filter-badge';
                badge.innerHTML = `${text}<span class="remove-filter">×</span>`;
                
                badge.querySelector('.remove-filter').addEventListener('click', onRemove);
                activeFiltersContainer.appendChild(badge);
            }
            
            // 点赞功能
            const likeBtns = document.querySelectorAll('.like-btn');
            likeBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    this.classList.toggle('liked');
                    const icon = this.querySelector('i');
                    const countEl = this.querySelector('span');
                    let count = parseInt(countEl.textContent);
                    
                    if (this.classList.contains('liked')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                        countEl.textContent = (count + 1).toString();
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                        countEl.textContent = (count - 1).toString();
                    }
                });
            });
            
            // 收藏功能
            const saveBtns = document.querySelectorAll('.save-btn');
            saveBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    this.classList.toggle('saved');
                    const icon = this.querySelector('i');
                    
                    if (this.classList.contains('saved')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                    }
                });
            });
            
            // 搜索功能
            const searchInput = document.querySelector('.search-container input');
            searchInput.addEventListener('keyup', function(e) {
                if (e.key === 'Enter') {
                    const searchTerm = this.value.trim().toLowerCase();
                    if (searchTerm) {
                        document.querySelectorAll('.service-card').forEach(card => {
                            const title = card.querySelector('.service-title').textContent.toLowerCase();
                            const description = card.querySelector('.service-description').textContent.toLowerCase();
                            const author = card.querySelector('.service-author').textContent.toLowerCase();
                            
                            const matches = title.includes(searchTerm) || 
                                           description.includes(searchTerm) || 
                                           author.includes(searchTerm);
                            
                            card.style.display = matches ? 'block' : 'none';
                        });
                    }
                }
            });
        });
    </script>
</body>
</html>

